<script setup>
import { useRoute } from 'vue-router';
import { stringify, parse } from 'flatted';

const route = useRoute()
let videoUrl = ref(null)
let bgImg = ref(null)
onMounted(() => {
  const videoData = parse(route.query.videoData)
  videoUrl.value = videoData._value.videoUrl
  bgImg.value = videoData._value.bgImg
})

</script>

<template>

  <body>
    <div :style="{ backgroundImage: 'url(' + bgImg + ')' }" class="bg"></div>
    <video controls autoplay>
      <source :src="videoUrl" type="video/mp4" style="width: 100%; height: 100%;">
    </video>
    <footer>
      <img class="leftTong" src="https://kanekikeh.online/A/icon/smileTong.png">
      <img class="rightTong" src="https://kanekikeh.online/A/icon/happyTong.png">
    </footer>
  </body>
</template>

<style scoped lang="scss">
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-position: center;
  background-size: cover;
  filter: blur(5px);
}

video {
  width: 75%;
  height: 75%;
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}

.leftTong {
  position: absolute;
  bottom: -5%;
  left: -2%;
  width: 150px;
  height: 150px;
  transform: rotate(30deg);
}

.rightTong {
  width: 140px;
  height: 150px;
  position: absolute;
  bottom: -4%;
  right: -1%;
  transform: rotate(330deg);
}
</style>